<style lang="less" rel="stylesheet/less" type="text/less">
.permission-box::after {
  content: "";
  display: block;
  clear: both;
}
.updateButton {
  margin-top: 20px;
  float: right;
}
</style>
<template>
  <div class="permission-box">
    <div>
      所属客户:
      <span style="padding-left:20px;">{{permission_detail.customer.name}}</span>
    </div>
    <div>
      ApiKey名称:
      <span style="padding-left:20px;">{{permission_detail.name}}</span>
    </div>

    <div>
      ApiKey有效期：
      <span
        style="padding-left:20px;"
        v-if="permission_detail.type===2"
      >{{ real_start}}---{{real_end}}</span>
      <span style="padding-left:20px;" v-else>永久</span>
    </div>
    <div style="padding-top:2px;padding-bottom:14px">ApiKey访问权限：</div>
    <Table :columns="titleName" :data="Perdata"></Table>
    <!-- <Button class="updateButton" type="primary" name="user_query__update" @click="update">更新权限</Button> -->
  </div>
</template>
<script>
export default {
  props: {
    permission_detail: {
      type: Object,
      default() {
        return {};
      }
    },
    Perdata: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      real_start: null,
      real_end: null,
      titleName: [
        {
          title: "group",
          key: "group"
        },
        {
          title: "endpoint",
          key: "name"
        },
        {
          title: "api名称",
          key: "title",
          width: "140px"
        },
        {
          title: "是否授权",
          //   type: "selection",
          //   width: 80,
          //   align: "center",
          render: (h, { row }) => {
            let permission;
            if (row.isChecked) {
              permission = (
                <div>
                  <Button
                    name="cancel_per"
                    size="small"
                    onClick={() => {
                      this.update(row);
                    }}
                    type="error"
                  >
                    取消授权
                  </Button>
                </div>
              );
            } else {
              permission = (
                <div>
                  <Button
                    name="ok_per"
                    size="small"
                    onClick={() => {
                      this.update(row);
                    }}
                    type="success"
                  >
                    授权
                  </Button>
                </div>
              );
            }

            return permission;
          }
        }
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    update(row) {

      this.$emit("updatePermission", row);
    },
    init() {
      this.$moment.locale(navigator.language);
      this.real_start = this.$moment
        .utc(`${this.permission_detail.start_time}`)
        .local()
        .format("lll");
      this.real_end = this.$moment
        .utc(`${this.permission_detail.end_time}`)
        .local()
        .format("lll");
    }
  }
};
</script>